<template>
  <view class="ta-l">
    <view class="hover-1 py-3" @click="showPop = true">
      <view v-if="title">
        <span>{{ title }}</span>
      </view>
      <view v-else class="color-1 fz-14">
        <span>选择收货地址</span>
      </view>
    </view>

    <hqs-popup title="选择地址" v-model="showPop" height="80vh">
      <view class="pa-3 pt-0">
        <view class="al-c mt-3">
          <view class="flex-1">
            <u--input
              v-model="keyword"
              placeholder="搜索地址"
              @confirm="onSearch"
            />
          </view>
          <view class="ml-3">
            <u-button
              type="primary"
              :customStyle="{
                height: '37px',
              }"
              :loading="locating"
              @click="onSearch"
            >
              搜索
            </u-button>
          </view>
        </view>
        <!-- <view class="fz-14 op-6 mt-4 mb-3">搜索结果</view> -->
        <view
          class="u-border-top py-3"
          hover-class="btn-1"
          v-for="it in placeRows"
          :key="it.id"
          @click="onPos(it)"
        >
          <view
            :class="{
              'color-1': it.id == pos.id,
            }"
            >{{ it.title }}</view
          >
          <view class="fz-13 mt-1 op-6">{{ it.address }}</view>
        </view>
      </view>
    </hqs-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    value: Object,
  },
  computed: {
    ...mapState(["myLocation"]),
  },
  data() {
    const pos = this.value || {};
    const { title = "" } = pos;
    return {
      title,
      pos,
      showPop: false,
      locating: false,
      keyword: "",
      placeRows: [],
    };
  },
  watch: {
    showPop(val) {
      if (val) {
        const title = this.value?.title;
        if (title) {
          this.keyword = title;
        }
        this.getLocation();
      }
    },
    title() {
      this.emitInput();
    },
  },
  methods: {
    async getLocation() {
      try {
        await this.$store.dispatch("getMyLocation");
        if (this.keyword) {
          this.onSearch();
        }
      } catch (error) {
        console.log(error);
        this.$confirm("未开启定位权限", {
          confirmText: "去开启",
        }).then(() => {
          uni.$h.openSetting();
        });
      }
    },
    goLocation() {
      const { address, location } = this.pos;
      uni.$h.openLocation({
        name: this.title,
        addr: address,
        ...location,
      });
    },
    onPos(it) {
      this.title = it.title;
      this.emitInput(it);
    },
    emitInput(it) {
      const { location, address } = it || this.pos;
      this.pos = {
        title: this.title,
        location,
        address,
      };
      this.$emit("input", this.pos);
      this.showPop = false;
    },
    async onSearch() {
      const params = {
        keyword: this.keyword.trim(),
      };
      if (!this.myLocation) {
        this.getLocation();
        return;
      }
      const { lat, lng } = this.myLocation;
      Object.assign(params, {
        lat,
        lng,
        distance: 8000,
      });
      if (!params.keyword) {
        return this.$toast("请输入地址关键词");
      }
      try {
        this.locating = true;
        const { data } = await uni.$api.get(uni.$apiHub.searchPlace, {
          params,
        });
        // console.log(data);
        this.placeRows = data.rows;
      } catch (error) {
        console.log(error);
      }
      this.locating = false;
    },
  },
};
</script>
